<template>
    <div class="map-info-container">
        <div class="info-container">
            <div class="info-container__title">当前所在位置</div>
            <div class="info-container__name">{{ modelName }}</div>
        </div>
        <div class="map-container" 
            v-loading="loading" 
            element-loading-text="影像获取中......"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)">
            <el-image
                style="width: 300px; height: 300px; box-shadow: 1px 1px rgba(0, 0, 0, .3), -1px -1px rgba(0, 0, 0, .2);"
                :src="url"
                fit="fill"
                >
                <div slot="error" class="image-slot">
                </div>
            </el-image>
        </div>
    </div>
</template>

<script>
import { getAmapStaticMap } from '@/request/request-api'

export default {
    name: 'StaticMap',
    props: {
        zoomLevel: {
            type: Number,
            default: 12,
            validator: function(zoomLevel) {
                return zoomLevel >= 1 && zoomLevel <= 17;
            }
        },
        modelName: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            url: '',
            urlStorage: '',
            imgMapLoading: true,
            parentCameraLoading: true
        }
    },
    computed: {
        loading() {
            return this.imgMapLoading || this.parentCameraLoading;
        }
    },
    watch: {
        loading(newLoadingStatus) {
            if (!newLoadingStatus) {
                this.url = this.urlStorage;
            }
        }
    },
    methods: {
        async loadAmapStaticMap(longitude, latitude) {
            try {
                this.imgMapLoading = true;
                const imageData =  await getAmapStaticMap(longitude, latitude, this.zoomLevel);
                const blob = new Blob([imageData], {type: 'image/png'});
                const tempUrl = window.URL.createObjectURL(blob);
                this.urlStorage = tempUrl;
                this.imgMapLoading = false;
            } catch (error) {
                console.log(`Fail to load static map from amap: ${error}`);
            }
        },
        changeParentCameraLoadingStatus(loading) {
            this.parentCameraLoading = loading;
        },
        clearUrl() {
            this.url = '';
        }
    }
}
</script>

<style lang="scss" scoped>
    .map-info-container {
        width: 310px;

        .info-container {
            width: 310px;
            font-size: 1.5vh;
            text-align: center;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 10px;
            box-shadow:inset 0 0 6px rgba(255, 255, 255, 0.4);
            margin-bottom: 5px;

            &__title {
                padding: 5px 0 0 0;
            }

            &__name {
                font-size: 1.6vh;
                font-weight: bold;
                padding: 5px 0 8px 0;
            }
        }

        .map-container {
            width: 300px;
            height: 300px;
            border: 5px solid rgba(255, 255, 255, 1);
            box-shadow: 1px 1px rgba(0, 0, 0, .3), -1px -1px rgba(0, 0, 0, .3);
        }
    }
</style>